<template>
  <div>
    <div class="header">
      <div class="cmp-work-list-card">
        <span class="Tips-posiion">{{ work.activity }}</span>
        <div class="layout-right">
          <div class="flex-align">
            <div class="h-left">
              <div class="title flex-align">
                <h4 class="common_pointer">{{ work.title }}</h4>
              </div>
            </div>
            <EditWork @init="init"></EditWork>
          </div>
          <div class="tags">
            <el-tag size="mini">
              {{ work.type === 1 ? '个人作业' : '小组作业' }}
            </el-tag>
            <span>
              <el-tag size="mini">提交起止时间：{{ work.releaseTime }}~{{ work.endTime }}</el-tag>
            </span>
            <el-tag size="mini" type="info">{{ work.score }}分</el-tag>
            <el-tag size="mini" type="info">
              {{ work.isAllowOvertimeSubmission === 1 ? '允许超时提交' : '不允许超时提交' }}
            </el-tag>
          </div>
          <div class="homework-description">
            <p>{{ work.content }}</p>
          </div>
        </div>
      </div>
    </div>
    <div class="cmp-comment-list">
      <section class="comment-container">
        <div class="comment-main flex-align">
          <div class="left">
            <img class="avatar" :src="circleUrl" alt="userImg">
          </div>
          <div class="right">
            <el-input type="textarea" v-model="insertComment.content" placeholder="说点什么吧" class="input-t" />
          </div>
        </div>
        <div class="comment-tools flex-align font-color font14">
          <div class="component-upload">
            <div class="upload-demo">
              <div class="el-upload el-upload--text">
                <span class="flex-align mgr16 common_pointer">
                  <!-- 未写部分，点击后可上传文件 -->
                  <i class="el-icon-paperclip">添加附件</i>
                </span>
              </div>
            </div>
          </div>
          <el-button type="button" class="el-button el-button--primary el-button--medium" @click="submitComment">
            <span>发表评论</span>
          </el-button>
        </div>
      </section>

      <section class="comment-list">
        <h1 class="font20 font-color flex-align">全部评论
          <span class="font12">
            共{{ this.allTotal }}条</span>
        </h1>
        <ul class="list-layout" v-if="total > 0">
          <div v-for="(item, index) in comments" :key="index" :index="index">
            <commentItem :comment="item"></commentItem>
          </div>

          <div class="pagination">

            <!-- 分页组件 size-change:每页最大变化 current-change:当前最大变化 layout:功能组件 -->
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
              :current-page="PageInfo.page" :page-sizes="[1, 2, 5, 100]" :page-size="PageInfo.pageSize"
              layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
          </div>
        </ul>
        <div class="component-no_data" v-else>
          <div class="img-box">
            <el-image class="img" src="https://www.ketangpai.com/img/img_empty.84d0931c.png"></el-image>
            暂无数据
          </div>
        </div>
      </section>
    </div>
  </div>
</template>

<script>
import circleUrl from "../../../assets/classDetail/work.png";
import commentItem from "./commentItem.vue";
import EditWork from "@/components/work/EditWork.vue";
import {getRequest, postRequest} from "@/utils/api";

export default {
  name: "WorkPage",
  components: {
    commentItem,
    EditWork
  },
  data() {
    return {
      circleUrl: circleUrl,
      drawer: false,
      insertComment: {
        userId: 0,
        workId: 0,
        superiorId: 0,
        content: '',
      },
      // 查询信息实体
      PageInfo: {
        // 当前页
        page: 1,
        // 每页最大数
        pageSize: 5,
        workId: 0
      },
      // 总记录数
      total: 0,
      // 全部评论数(含回复评论数)
      allTotal: 0,
      comments: {},
      work: {},
    }
  },
  methods: {
    init() {
      this.getWork();
      this.getCommentList();
    },
    // 获取作业信息
    getWork() {
      const id = 1;//this.$store.getters.workId;
      getRequest(`/work/selectById/${id}`).then(res => {
        if (res) {
          this.work = res.data.data;
        }
      })
    },
    // 获取作业评论信息
    getCommentList() {
      this.PageInfo.workId = 1;//this.$store.getters.workId;
      console.log("this.PageInfo:",this.PageInfo);
      postRequest("/workComment/list", this.PageInfo).then(res => {
        console.log("res",res);
        console.log("res.data.list2",res.data.data.list)
        if (res) {
          this.comments = res.data.data.list;
          this.total = res.data.data.total;
          this.allTotal = res.data.data.allTotal;
        }
      })
    },
    // 最大数
    handleSizeChange(newSize) {
      this.PageInfo.pageSize = newSize;
      this.init();
    },
    // page的触发动作
    handleCurrentChange(newPage) {
      this.PageInfo.page = newPage;
      this.init();
    },
    // 发表评论
    submitComment() {
      if (this.insertComment.content === '') return this.$message.error("请输入评论内容");
      else {
        this.insertComment.userId = 3;//this.$store.getters.user.id;
        this.insertComment.workId = 1;//this.$store.getters.workId;
        this.insertComment.superiorId = 0;
        this.insertComment.respondentId = 2;//this.$store.getters.user.id;
        postRequest("/workComment/insert", this.insertComment).then(res => {
          // 清空新增评论
          console.log(res);
          this.insertComment.content = null;
          this.init();
        })
      }
    },
  },
  created() {
    this.init()
  }
}
</script>

<style scoped lang="less">
.header {
  border-radius: 4px;
  border: 1px solid #ccc;
  padding: 12px;

  .cmp-work-list-card {
    width: 100%;
    display: flex;
    position: relative;

    .Tips-posiion {
      position: absolute;
      background: #31ccd2;
      color: #fff;
      font-size: 14px;
      left: -12px;
      top: -12px;
      border-bottom-right-radius: 4px;
      text-align: center;
      padding: 8px;
    }

    .layout-right {
      width: 100%;
      margin-top: 30px;

      .flex-align {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 0px;

        .h-left {
          .title {
            line-height: 20px;
            display: flex;
            align-items: center;

            h4 {
              font-size: 16px;
              font-weight: 500;
              margin-right: 5px;
              max-width: 670px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }

            .common_pointer {
              -webkit-user-select: none;
              -moz-user-select: none;
              -ms-user-select: none;
              user-select: none;
              cursor: pointer;
            }
          }
        }
      }

      .tags {
        padding: 8px 0;

        .el-tag {
          margin-right: 6px;
        }
      }
    }
  }
}

.cmp-comment-list {
  overflow: auto;
  color: #3c4043;
  background: #fff;

  .comment-main {
    margin-top: 24px;
    padding: 12px;
    border-bottom: 2px solid #4285f4;
    background: #f8f9fa;

    .left {
      margin-right: 10px;

      .avatar {
        width: 32px;
        height: 32px;
        border-radius: 50%;
      }
    }

    .right {
      flex: 1;
    }
  }

  .comment-tools {
    margin: 16px 0;
    justify-content: flex-end;
    color: #3c4043;
    font-size: 14px;

    .upload-demo {
      display: flex;
      flex-direction: column;

      .mgr16 {
        margin-right: 16px;
      }
    }
  }

  .comment-list {
    margin-top: 12px;

    .flex-align {
      display: flex;
      align-items: center;
    }

    h1 {
      line-height: 24px;
      color: #3c4043;
      font-size: 20px;

      .font12 {
        color: #74787c;
        padding: 0 8px;
        font-size: 12px;
      }
    }

    .component-no_data {
      height: max-content;
      padding-top: 100px;
      font-size: 16px;
      font-weight: 500;
      text-align: center;
      color: #74787c;
      line-height: 24px;

      .img-box {
        padding-bottom: 12px;

        .img {
          height: 250px;
          display: block;
          margin: 0 auto;
        }
      }
    }

    .list-layout {
      width: 100%;
      padding: 0;

      .pagination {
        text-align: center;
        margin: 24px 0;
      }
    }
  }
}

.flex-align {
  display: flex;
  align-items: center;
}
</style>
